<template>
  <div>
    <div class="zxpj_br_list">
      <el-descriptions :column="column" border class="111">
        <el-descriptions-item
          v-for="(item, index) in list"
          :key="index"
          :content-class-name="
            item.type == 'span' ? 'contentclass' : 'my-content'
          "
          :label-class-name="item.type == 'span' ? 'labelclass' : 'my-label_jb'"
          :label="item.type != 'span' ? item.name + ':' : item.name"
          :span="item.span"
        >
          <!-- <span v-if="item.type == 'span'" class="title_span">{{
            item.value
          }}</span> -->
          <el-input-number
            v-if="item.type == 'number'"
            :controls="false"
            :precision="2"
            v-model="item.value"
            :label="item.isp ? item.isp : '请输入' + item.name"
            :disabled="item.disabled"
            :class="item.value == '' ? bt : ''"
          >
          </el-input-number>
          <el-input
            v-if="item.type == 'input'"
            :placeholder="item.isp ? item.isp : '请输入' + item.name"
            v-model="item.value"
            :disabled="item.disabled"
            :class="item.value == '' ? bt : ''"
          >
          </el-input>
          <el-input
            v-if="item.type == 'text'"
            type="textarea"
            :rows="item.rows ? item.rows : 3"
            :placeholder="item.isp ? item.isp : '请输入' + item.name"
            v-model="item.value"
            :disabled="item.disabled"
            :class="item.value == '' ? bt : ''"
          >
          </el-input>
          <el-select
            v-if="item.type == 'select'"
            v-model="item.value"
            :placeholder="item.isp ? item.isp : '请选择' + item.name"
            size="small"
            :disabled="item.disabled"
            :class="item.value == '' ? bt : ''"
          >
            <el-option
              v-for="(a, i) in item.list"
              :key="i"
              :label="a.name"
              :value="a.value"
            >
            </el-option>
          </el-select>

          <el-date-picker
            v-if="item.type == 'time'"
            v-model="item.value"
            type="date"
            size="small"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :disabled="item.disabled"
            :class="item.value == '' ? bt : ''"
          >
          </el-date-picker>
          <div
            class="zxpj_br_upload_list"
            :class="{
              span_tow: item.span == 1 || (column == 3 && item.span == 2),
            }"
            v-if="item.type == 'upload'"
          >
            <el-upload
              class="jnhfxq2_pz_uploadbox"
              :action="url + '/index/ajax/upload'"
              :disabled="item.disabled"
              :file-list="item.imglist"
              :on-success="
                (response, file, fileList) => {
                  handleSuccess(response, file, fileList, index);
                }
              "
              :on-preview="
                (file) => {
                  handlePictureCardPreview(file, index);
                }
              "
              :on-remove="
                (file, fileList) => {
                  handleRemove(file, fileList, index);
                }
              "
              :before-upload="beforeAvatarUpload"
            >
              <el-button :disabled="item.showbutton" type="primary" size="small"
                >上传<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </el-upload>
            <el-dialog :visible.sync="item.value.dialogVisible" append-to-body>
              <img width="100%" :src="item.value.dialogImageUrl" alt="" />
            </el-dialog>
            <div class="uploadpz" v-if="item.span > 1 && column == 2">
              {{ item.notes }}
            </div>
            <span class="uploadpz_two" v-if="item.span == 1 && column == 2">{{
              item.notes
            }}</span>

            <div class="uploadpz" v-if="item.span > 2 && column > 2">
              {{ item.notes }}
            </div>
            <span class="uploadpz_two" v-if="item.span == 2 && column > 2">{{
              item.notes
            }}</span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
    
<script>
import env from "../../env.js";

export default {
  props: {
    list: {
      type: Array,
      default: [],
      required: true,
    },
    column: {
      type: Number,
      default: 2,
    },
    title: {
      type: String,
      default: "11",
    },
    bt: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      url: env.API_BASE_URL,
    };
  },
  mounted() {
    // 获取子元素
    let childElement = document.querySelector(".labelclass");

    // 获取父元素
    if (childElement) {
      let parentElement = childElement.parentNode;
      parentElement.classList.add("highlight");
    }

    // 添加样式
  },
  methods: {
    /**
     * 删除文件
     * @param {方法本身回调} file
     * @param {当前信息栏的下标} index
     */
    handleRemove(file, fileList, index) {
      //  console.log(file,index)
      this.list.forEach((item, i) => {
        if (i == index) {
          // item.imglist.forEach((data, a) => {
          //   if (data.url == file.url) {
          //     this.$emit("splice", item.imglist.splice(a, 1));
          //   }
          // });
          this.$emit("splice", (item.imglist = fileList.slice(-100)));
        }
      });
    },
    /**
     * 上传图片预览
     * @param {上传文件被点击方法回调} file
     * @param {当前信息栏的下标} index
     */
    handlePictureCardPreview(file, index) {
      console.log(file);

      if (file.response) {
        // console.log(file.response.fullurl);
        if (this.$self.pdimg(file.response.data.fullurl) != "img") {
          window.open(file.response.data.fullurl);
          return;
        }
      } else {
        if (this.$self.pdimg(file.url) != "img") {
          window.open(file.url);
          return;
        }
      }

      this.list.forEach((item, i) => {
        if (i == index) {
          item.value.dialogVisible = true;
          if (file.response) {
            // console.log(file.response.fullurl);
            item.value.dialogImageUrl = file.response.data.fullurl;
          } else {
            item.value.dialogImageUrl = file.url;
          }
        }
      });
    },
    /**
     * 上传成功
     * @param {后台返回的参数} response
     * @param {方法本身回调} file
     * @param {文件列表} fileList
     * @param {当前信息栏的下标} index
     */
    handleSuccess(response, file, fileList, index) {
      // console.log(
      //   response,
      //   "-=-=-=-=",
      //   file,
      //   "-=-=-=-=",
      //   fileList,
      //   "-=-=-=-=",
      //   index
      // );
      this.list.forEach((item, i) => {
        if (i == index) {
          let arr = fileList.slice(-100);
          this.$emit(
            "add",
            // item.imglist.push({
            //   url: this.$self.imgurl(response.data.url),
            // })
            (item.imglist = arr)
          );
        }
      });
    },
    beforeAvatarUpload(file) {
      const typeArry = [
        ".jpg",
        ".png",
        ".JPG",
        ".PNG",
        ".jpeg",
        ".doc",
        ".docx",
        ".pdf",

      ];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArry.indexOf(type) > -1;

      const isLt2M = 0.4 < file.size / 1024 / 1024 < 0.6;

      if (!isImage) {
        this.$message.error("请上传指定类型");
      }
      if (!isLt2M) {
        this.$message.error("图片大小400-600k");
      }
      return isImage && isLt2M;
    },
    //  ==
  },
};
</script>
<style scope>
.my-label_jb {
  width: 2rem;
  text-align: end !important;
  border-right: none !important;
  background: #fff !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.my-content {
  width: 5.6rem;
}

.zxpj_br_list .el-input__inner {
  border: none !important;
  height: 24px;
  width: 100% !important;
}
.zxpj_br_list .bt .el-input__inner {
  border: solid 1px red !important;
}
.zxpj_br_list .el-input.is-disabled .el-input__inner {
  background-color: #ffffff;
}

.zxpj_br_list .el-input.is-disabled .el-input__inner {
  color: #333333;
}

.zxpj_br_list .el-input--small .el-input__icon {
  line-height: 25px;
}

.zxpj_br_upload_list {
  padding-left: 0.275rem;
  box-sizing: border-box;
}

.zxpj_br_upload_list .el-upload--picture-card {
  width: 0.8875rem;
  height: 0.8875rem;
  line-height: 1rem;
  background: #f2f2f2;
  border: none;
}

.zxpj_br_upload_list .el-upload--picture-card i {
  font-size: 0.35rem;
}

.zxpj_br_upload_list .uploadpz {
  font-size: 0.175rem;
  font-weight: 400;
  color: #333333;
  margin-top: 0.3375rem;
}

.zxpj_br_upload_list .uploadpz_two {
  font-size: 0.175rem;
  font-weight: 400;
  color: #c0c4cc;
  margin-left: 0.1375rem;
}

.span_tow {
  display: flex;
  align-items: center;
}

.zxpj_br_upload_list .el-upload-list--picture-card .el-upload-list__item {
  width: 0.9rem;
  height: 0.9rem;
}

.zxpj_br_upload_list .el-input.is-disabled .el-input__inner {
  background: #ffffff;
  color: #333333;
}

.labelclass {
  background: #ffffff !important;
  color: #1954a4 !important;
  font-size: 0.2125rem;
  border: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  height: 0.6125rem;
  white-space: nowrap;
  width: 0.75rem;
}

.contentclass {
  background: #ffffff !important;
  color: #1954a4 !important;
  font-size: 0.2125rem;
  border: none !important;
  padding: 0 !important;
}

.zxpj_br_list .el-textarea__inner {
  border: none;
}
.zxpj_br_list .bt .el-textarea__inner {
  border: solid 1px red !important;
}
.zxpj_br_list .el-select {
  width: 100%;
}
.zxpj_br_list .el-input-number .el-input__inner {
  text-align: left !important;
}
</style>